<!-- 会议选项组件 -->
<template>
	<view class="context" @click="handleClick">
		<!-- 标题 -->
		<view class="meetingList">
			<view class="left-box">
				<image :src="iconPath" />
				<text class="title-name">{{ message }}</text>
			</view>
            <!-- 时间 -->
            <view class="right-box time" v-if="type === 'time' ">
              {{ month }}{{ '  ' }}{{ time }}-{{ time2 }}
            </view> 
            <!-- 地点 -->
            <view class="right-box local" v-else-if="type === 'local'">
                {{ local }}
            </view>
            <!-- icons -->
            <view class="right-box icon" v-else-if="type === 'icon'" >
                <image :src="iconTwo"/>
            </view>
            <!-- text -->
            <view class="right-box text" v-else-if="type === 'text'" >
                {{ text }}
            </view>
		</view>

	</view>
</template>

<script>
	export default {
        //属性 图标地址、标题、类型、(时间/楼城/icons)
		props: {
            iconPath: String,
			message: String,
            type: {
                type:String,
                default:'time'
            },
            time:{
                type:String,
                default:'8.00'
            },
            time2:{
                type:String,
                default:'19:00'
            },
            month:{
                type:String,
                default:'00.00'
            },
            local:{
                type:String,
                default:'XX号 XX楼'
            },
            iconTwo:String,
            text:String
		},
		data() {
			return {

			}
		},
		methods: {
            handleClick() {
                // 子组件点击时，触发自定义事件通知父组件
                this.$emit('child-clicked');
            }
		},
		created(){
            
        }
	}
</script>

<style>
    .title{
    }

	.meetingList {
		height: 100rpx;
		width: 100%;
		margin-top: 2%;
		background-color: white;
		/*box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;*/
		display: flex;
		align-items: center;
        justify-content: space-between;
        
	}

	.meetingList image {
		height: 35rpx;
		width: 35rpx;
	}

    .left-box {
        display: flex;
        align-items: center;
    }

    .right-box {
        display: flex;
        align-items: center;
    }
    .left-box,.right-box {
        padding: 3%;
    }
    .time {
        color: #adadad;
    }
    .local {
        color: #adadad;
    }
    .icon {}
    .text{
        color: #adadad;
    }
</style>